<template>
	<view class="home" :style="{backgroundColor:''+userImage+''}">
		<!-- <u-sticky :offsetTop="60"> -->
		<!-- 闪电 -->
		<view class="" v-if="lightningiF">
			<view class="shandian">
				<image class="lightning" src="@/static/weather/shandiana.png" mode=""></image>
			</view>
			<view class="shandianb">
				<image class="lightningb" src="@/static/weather/shandianb.png" mode=""></image>
			</view>
		</view>

		<!-- 下雨 -->
		<view class="body_yu" v-if="rainIf">
			<view class="container">
				<view class="rain" v-for="(i,index) in styleList" :key="index">
					<!-- <span :style="i"></span> -->
					<image class="img" :style="i" src="@/static/weather/yudi.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 雪天 -->
		<view class="body_xue" v-if="snowIf">
			<view class="container">
				<view class="rain" v-for="(i,index) in snowList" :key="index">
					<!-- <span :style="i"></span> -->
					<image class="img" :style="i" src="@/static/weather/xue.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 云彩 -->
		<view class="section">
			<view class="wave_box wave_animation">
				<!-- 云彩 -->
				<view class="wave_imgs wave_imgs1">
					<image class="wave_bg" src="@/static/weather/cloudy--day.png" mode="widthFix">
					</image>
					<image class="wave_bg" src="@/static/weather/cloudy--day.png" mode="widthFix">
					</image>
				</view>
				<view class="wave_imgs">
					<image class="wave_bg" src="@/static/weather/cloudy--day.png" mode="widthFix"></image>
					<image class="wave_bg" src="@/static/weather/cloudy--daya.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 晴天 -->
		<view class="" style="position: absolute;right: 0;top: 0;" v-if="clearWeather">
			<image style="width: 750rpx;;" class="" src="@/static/weather/qing.png" mode="widthFix">
		</view>
		<!-- </u-sticky> -->
		<!-- 导航 -->
		<u-navbar :title="titleData" leftIconColor="#fff" bgColor="rgba(0,0,0,0)" :titleStyle="titleStyle" :autoBack="true" v-show="navbarIF"></u-navbar>
		<!-- 天气 -->
		<view class="content">
			<view class="weather">
				<view class="weather_top">
					<view class="weather_icons">
						<view class="tubiao">
							<view class="tub">
								<text :class="icon"></text>
							</view>
							<view class="tex">
								体感温度：{{tianqi.feelsLike}}°
							</view>
						</view>
						<view class="text">
							<view class="a">
								{{tianqi.temp}}°
							</view>
							<view class="b">
								{{tianqi.text}}
							</view>
						</view>
					</view>
					<view class="weather_text">
						<view class="item">
							<view class="text_a">
								{{tianqi.pressure}}hPa
							</view>
							<view class="text_b">
								大气压
							</view>
						</view>
						<view class="" style="width: 1rpx;height: 40rpx;background-color: #ffffff;"></view>
						<view class="item">
							<view class="text_a">
								{{tianqi.windDir}}
							</view>
							<view class="text_b">
								风向
							</view>
						</view>
						<view class="" style="width: 1rpx;height: 40rpx;background-color: #ffffff;"></view>
						<view class="item">
							<view class="text_a">
								{{tianqi.vis}}km
							</view>
							<view class="text_b">
								能见度
							</view>
						</view>
						<view class="" style="width: 1rpx;height: 40rpx;background-color: #ffffff;"></view>
						<view class="item">
							<view class="text_a">
								{{tianqi.humidity}}%
							</view>
							<view class="text_b">
								相对湿度
							</view>
						</view>
					</view>
					<!-- 今天明天 -->
					<view class="day_four">
						<view class="dat_box">
							<view class="day">
								<view class="day_i">
									<view class="">
										今日
									</view>
									<view class="">
										<view class="">
											{{dayTo.day.tempMin}}° ~ {{dayTo.day.tempMax}}°
										</view>
									</view>
								</view>
								<view class="day_i">
									<view class="" style="font-size: 50rpx;">
										<text :class="'qi-' + dayTo.day.iconDay"></text>
									</view>
									<view class="tex_aa">{{dayTo.day.textDay}}</view>
								</view>
							</view>
							<view class="" style="width: 2rpx;height: 100rpx;background-color: rgba(255, 255, 255, 0.3)">
								
							</view>
							<view class="day">
								<view class="day_i">
									<view class="">
										明天
									</view>
									<view class="">
										<view class="">
											{{dayTo.to.tempMin}}° ~ {{dayTo.to.tempMax}}°
										</view>
									</view>
								</view>
								<view class="day_i">
									<view class="" style="font-size: 50rpx;">
										<text :class="'qi-' + dayTo.to.iconDay"></text>
									</view>
									<view class="tex_aa">{{dayTo.to.textDay}}</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 24小时 -->
					<view class="twenty_four">
						<view class="" style="display: flex;align-items: center;">
							<u-icon name="clock" size="18" color="rgba(255, 255, 255, 0.5)"></u-icon>
							<view class="" style="line-height: 50rpx;margin-left: 8rpx;margin-top: -8rpx;">
								每小时天气预报
							</view>
						</view>
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
							<view class="scroll-view-item_H" v-for=" (i,index) in twentyFourList" :key="index">
								<view class="text_f" style="font-size: 30rpx;line-height: 50rpx;">
									{{$u.timeFormat(i.fxTime, 'h时')}}
								</view>
								<view class="" style="font-size: 50rpx;">
									<text :class="'qi-' + i.icon"></text>
								</view>
								<view class="" style="font-size: 40rpx;line-height: 80rpx;">
									{{i.temp}}°
								</view>
							</view>
						</scroll-view>
						<!-- 						<view class="day">
							天气更新时间 {{tianqi.time}}
						</view> -->
					</view>
					<!-- 七天 -->
					<view class="twenty_four">
						<view class="" style="display: flex;align-items: center;">
							<u-icon name="order" size="18" color="rgba(255, 255, 255, 0.5)"></u-icon>
							<view class="" style="line-height: 50rpx;margin-left: 8rpx;margin-top: -8rpx;">
								七日天气预报
							</view>
						</view>
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
							<view class="scroll-view-item_H itemscroll_view" v-for=" (i,index) in sevenDaysList"
								:key="index">

								<view class="flx" style="font-size: 40rpx;">
									<view class="">{{$u.timeFormat(i.fxDate, 'dd日')}}</view>
									<text :class="'qi-' + i.iconDay"></text>
								</view>
								<view class="" style="font-size: 40rpx;line-height: 80rpx;color: #a1f8ff;">
									{{i.tempMin}}° ~ {{i.tempMax}}°
								</view>
							</view>
						</scroll-view>
						<view class="day">
							天气更新时间 {{tianqi.time}}
						</view>
					</view>
				</view>
			</view>
			<!-- <button @click="xiaXueFn">测试雪天</button>
			<button @click="xiayuFn">测试雷雨天</button>
			<button @click="qingFn">测试晴天</button> -->
		</view>

	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js';
	import yuliangzhan from '@/components/yuLiangZhan.vue';
	export default {
		components: {
			yuliangzhan
		},
		data() {
			return {
				titleStyle:{
					color:'#ffffff',
					fontSize:'40rpx'
				},
				snowIf: true,
				navbarIF: true,
				clearWeather: false,
				lightningiF: false,
				rainIf: false,
				sevenDaysList: [],
				twentyFourList: [],
				styleList: [],
				// userImage: '#4c6d95',
				userImage: '#546374',
				titleData: '雨量站信息',
				obYLZ: [],
				tianqi: {},
				icon: 'qi-100',
				activeStyle: {
					color: '#67fff3'
				},
				inactiveStyle: {
					color: '#c2c2c2'
				},
				list: [{
					name: '3天',
				}, {
					name: '7天',
				}, {
					name: '15天'
				}, {
					name: '30天'
				}],
				deviceName: '',
				productKey: '',
				beginReportingTime: '',
				endReportingTime: '',
				thingsModelValue: {},
				optionid: null,
				iconnum: null,
				optionData: {},
				snowList: [],
				dayTo: {
					day: {},
					to: {}
				}
			}
		},
		onLoad(option) {
			this.titleData = option.name
			this.optionData = option
			let lon = option.lon * 1
			let lat = option.lat * 1
			let lonlat = lon.toFixed(2) * 1 + ',' + lat.toFixed(2) * 1
			this.weatherFn(lonlat)
		},
		onShow() {
			// this.daysFn(0)
		},
		methods: {
			xiaXueFn() {
				this.userImage = '#546374'
				this.snowIf = true
				this.clearWeather = false
				for (let i = 0; i < 100; i++) {
					let obj = "--i:" + this.getRandomNumber(10, 60)
					this.snowList.push(obj)
				}
			},
			xiayuFn() {
				this.userImage = '#546374'
				this.rainIf = true
				this.clearWeather = false
				for (let i = 0; i < 100; i++) {
					let obj = "--i:" + this.getRandomNumber(10, 60)
					this.styleList.push(obj)
				}
			},
			qingFn() {
				this.userImage = '#648fc4'
				this.rainIf = false
				this.clearWeather = true
			},
			// 天气
			weatherFn(e) {
				// 当前天气
				let key = '569de1237a82445cabd591293f21badd'
				uni.request({
					url: 'https://devapi.qweather.com/v7/weather/now',
					data: {
						location: e,
						key: key
					},
					success: (res) => {
						console.log('天气', res);
						if (res.data.code == 200) {
							this.tianqi = res.data.now
							this.tianqi.time = dayjs(res.data.now.obsTime).format('YYYY-MM-DD HH:mm:ss')
							this.icon = 'qi-' + res.data.now.icon
							let sty = res.data.now.icon * 1
							if (sty > 99 && sty < 154 && sty != 104) {
								this.userImage = '#648fc4'
							} else {
								this.userImage = '#546374'
							}
							// 晴天
							if (sty == 100 || sty == 103) {
								this.qingFn()
							}
							// 雨天
							if (sty >= 301 && sty < 400 && sty != 350) {
								this.xiayuFn()
							}
							// 雷雨天
							if (sty == 302 || sty == 303 || sty == 304) {
								this.lightningiF = true
							}
						}
					}
				})
				// 24小时
				uni.request({
					url: 'https://devapi.qweather.com/v7/weather/24h',
					data: {
						location: e,
						key: key
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.twentyFourList = res.data.hourly
						}
					}
				});
				// 7天
				uni.request({
					url: 'https://devapi.qweather.com/v7/weather/7d',
					data: {
						location: e,
						key: key
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.sevenDaysList = res.data.daily
							this.dayTo.day = res.data.daily[0]
							this.dayTo.to = res.data.daily[1]
						}
						console.log('七天', res);
					}
				});
			},
			clickTabs(item) {
				this.daysFn(item.index)
			},
			// 图表时间
			daysFn(index) {
				let now = dayjs();
				// 3天
				let todayStart = now.subtract(2, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let todayEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 7天
				let threeStart = now.subtract(6, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let threeEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 15天
				let fifteenStart = now.subtract(14, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let fifteenEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				// 30天
				let sixtyStart = now.subtract(29, 'day').format('YYYY-MM-DD ') + '00:00:00'
				let sixtyEnd = now.subtract(0, 'hour').format('YYYY-MM-DD HH:mm:hh')
				if (index == 0) {
					this.beginReportingTime = todayStart
					this.endReportingTime = todayEnd
					this.deviceNex()
				}
				if (index == 1) {
					this.beginReportingTime = threeStart
					this.endReportingTime = threeEnd
					this.deviceNex()
				}
				if (index == 2) {
					this.beginReportingTime = fifteenStart
					this.endReportingTime = fifteenEnd
					this.deviceNex()
				}
				if (index == 3) {
					this.beginReportingTime = sixtyStart
					this.endReportingTime = sixtyEnd
					this.deviceNex()
				}
			},
			// 图表数据
			deviceNex() {
				uni.$u.http.get('/api/device/device/selectYuliangzhanModelReportData', {
					params: {
						"identifier": 'TR',
						"deviceName": this.optionData.deviceName,
						"productKey": this.optionData.productKey,
						"beginReportingTime": this.beginReportingTime,
						"endReportingTime": this.endReportingTime,
						"tabPosition": 1,
						"chartType": 1,
					}
				}).then(res => {
					if (res.code == 200) {
						this.obYLZ = res.data

					} else {
						uni.showToast({
							title: '暂无数据',
							duration: 1500
						});
					}
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 1500
					})
				})
			},
			// 随机数
			getRandomNumber(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}

		},
		onResize() {
			// 横屏竖屏
			uni.getSystemInfo({
				success: (res) => {
					if (res.windowWidth > res.windowHeight) {
						console.log('横屏');
						this.navbarIF = false
					} else {
						console.log('竖屏');
						this.navbarIF = true
					}
				}
			});
		},

	}
</script>
<style scoped lang="scss">
	.home {
		position: relative;
		height: 100vh;

		// 动画云
		.section {

			.wave_box {
				width: 100%;
				height: 200rpx;
				padding-top: 40rpx;
				position: relative;
				display: flex;
				align-items: center;

				.wave_imgs {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					bottom: 0;

					.wave_bg {
						display: block;
						width: 100%;
						min-width: 100%;
						height: 100%;
						margin: 0;
						padding: 0;
						position: absolute;
						bottom: 0;
					}

					.wave_bg:nth-child(1) {
						left: 0;
						transition: left 0.2s;
					}

					.wave_bg:nth-child(2) {
						left: 100%;
						transition: left 0.2s;
					}

				}

				.wave_imgs1 {
					width: 200%;
				}
			}

			.wave_animation {
				.wave_imgs {
					.wave_bg:nth-child(1) {
						animation-name: wave_animation;
						animation-timing-function: linear;
						animation-iteration-count: infinite;
					}

					.wave_bg:nth-child(2) {
						animation-name: wave_animation2;
						animation-timing-function: linear;
						animation-iteration-count: infinite;
					}
				}

				.wave_imgs:nth-child(1) {
					.wave_bg {
						animation-duration: 60s;
					}

					.wave_bg:nth-child(2) {
						animation-name: wave_animation3;
					}
				}

				.wave_imgs:nth-child(2) {
					.wave_bg {
						animation-duration: 80s;
					}
				}
			}

			@keyframes wave_animation {
				0% {
					left: 0;
				}

				100% {
					left: -100%;
				}
			}

			@keyframes wave_animation2 {
				0% {
					left: 100%;
				}

				100% {
					left: 0;
				}
			}

			@keyframes wave_animation3 {
				0% {
					left: calc(100% - 1rpx);
				}

				100% {
					left: -1rpx;
				}
			}

		}

		// 下雪css
		.body_xue {
			position: absolute;
			width: 750rpx;
			left: 0;
			top: 0;

			.container {
				position: relative;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;

				.rain {
					position: relative;
					display: flex;
					z-index: 1;
				}

				.rain .img {
					position: relative;
					bottom: 10 0rpx;
					width: 15rpx;
					height: 15rpx;
					margin: 0 1px;
					// background-color: rgba(255, 255, 255, 0.3);
					animation: animateXX 1s linear infinite;
					animation-duration: calc(150s/var(--i));
					transform-origin: bottom;
				}

				@keyframes animateXX {
					0% {
						transform: translateY(0) scaleY(1);
					}

					70% {
						transform: translateY(550rpx) scaleY(1);
					}

					100% {
						transform: translateY(550rpx) scaleY(0.1) scaleX(1);
					}
				}
			}
		}

		// 下雨css
		.body_yu {
			position: absolute;
			width: 750rpx;
			left: 0;
			top: 0;

			.container {
				position: relative;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;

				.rain {
					position: relative;
					display: flex;
					z-index: 1;
				}

				.rain .img {
					position: relative;
					bottom: 10 0rpx;
					width: 5rpx;
					height: 20rpx;
					margin: 0 1px;
					// background-color: rgba(255, 255, 255, 0.3);
					animation: animate 1s linear infinite;
					animation-duration: calc(15s/var(--i));
					transform-origin: bottom;
				}

				@keyframes animate {
					0% {
						transform: translateY(0) scaleY(1);
					}

					70% {
						transform: translateY(550rpx) scaleY(1);
					}

					100% {
						transform: translateY(550rpx) scaleY(0.1) scaleX(5);
					}
				}
			}
		}

		// 闪电
		.shandian {
			position: absolute;
			width: 750rpx;
			left: 0;
			top: 0;

			.lightning {
				width: 750rpx;
				height: 700rpx;
				animation: flash 8s infinite;
			}
		}

		@keyframes flash {
			0% {
				opacity: 0;
			}

			5% {
				opacity: 0;
			}

			6% {
				opacity: 1;
			}

			11% {
				opacity: 0;
			}

			20% {
				opacity: 0;
			}

			30% {
				opacity: 0;
			}

			40% {
				opacity: 0;
			}

			50% {
				opacity: 0;
			}

			60% {
				opacity: 0;
			}

			70% {
				opacity: 0;
			}

			80% {
				opacity: 0;
			}

			90% {
				opacity: 0;
			}

			100% {
				opacity: 0;
			}
		}


		.shandianb {
			position: absolute;
			width: 750rpx;
			left: 0;
			top: 0;

			.lightningb {
				width: 750rpx;
				height: 700rpx;
				animation: flashb 8s infinite;
			}
		}

		@keyframes flashb {
			0% {
				opacity: 0;
			}

			10% {
				opacity: 0;
			}

			20% {
				opacity: 0;
			}

			30% {
				opacity: 0;
			}

			40% {
				opacity: 0;
			}

			50% {
				opacity: 0;
			}

			60% {
				opacity: 0;
			}

			71% {
				opacity: 0;
			}

			72% {
				opacity: 1;
			}

			77% {
				opacity: 0;
			}

			80% {
				opacity: 0;
			}

			90% {
				opacity: 0;
			}

			100% {
				opacity: 0;
			}
		}

		// 下雨
		.section_yu {
			width: 750rpx;

			left: 0;
			top: 0;

			.wave_box {
				width: 100%;
				height: 250rpx;
				padding-top: 40rpx;
				position: relative;
				display: flex;
				align-items: center;

				.wave_imgs {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: -80rpx;

					.wave_bg {
						display: block;
						width: 100%;
						min-width: 100%;
						height: 400rpx;
						margin: 0;
						padding: 0;
						position: absolute;
						bottom: 0;
					}

					.wave_bg:nth-child(1) {
						bottom: 0;
						transition: bottom 0.2s;
					}

					.wave_bg:nth-child(2) {
						bottom: 100%;
						transition: bottom 0.2s;
					}

				}

				.wave_imgs1 {
					height: 100%;
				}
			}

			.wave_animation_yu {
				.wave_imgs {
					.wave_bg:nth-child(1) {
						animation-name: wave_animation_yu;
						animation-timing-function: linear;
						animation-iteration-count: infinite;
					}

					.wave_bg:nth-child(2) {
						animation-name: wave_animation2_yu;
						animation-timing-function: linear;
						animation-iteration-count: infinite;
					}
				}

				.wave_imgs:nth-child(1) {
					.wave_bg {
						animation-duration: 0.8s;
					}

					.wave_bg:nth-child(2) {
						animation-name: wave_animation3_yu;
					}
				}

				.wave_imgs:nth-child(2) {
					.wave_bg {
						animation-duration: 0.5s;
					}
				}
			}

			@keyframes wave_animation_yu {
				0% {
					bottom: 0;
				}

				100% {
					bottom: -100%;
				}
			}

			@keyframes wave_animation2_yu {
				0% {
					bottom: 100%;
				}

				100% {
					bottom: 0;
				}
			}

			@keyframes wave_animation3_yu {
				0% {
					bottom: calc(100% - 1rpx);
				}

				100% {
					bottom: -1rpx;
				}
			}

		}

		.content {
			margin-top: -100rpx;

			.weather {
				color: #ffffff;
				margin: 30rpx;

				.weather_top {
					.weather_icons {

						display: flex;
						align-items: center;
						justify-content: center;

						.tubiao {
							text-align: center;

							.tub {
								font-size: 120rpx;
							}

							.tex {
								font-size: 30rpx;
							}
						}

						.text {
							text-align: center;

							margin-left: 50rpx;

							.a {
								font-size: 80rpx;
							}

							.b {
								font-size: 50rpx;
							}
						}
					}

					.weather_text {
						margin: 60rpx 0 30rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-around;
						border-radius: 30rpx;
						padding: 30rpx 0;
						background-color: rgba(225, 236, 255, 0.1);

						.item {

							text-align: center;

							.text_a {
								font-size: 35rpx;
							}

							.text_b {
								font-size: 25rpx;
							}
						}
					}
				}
			}

			.day_four {
				padding: 20rpx;
				border-radius: 20rpx;
				color: rgba(255, 255, 255, 0.5);
				background-color: rgba(0, 0, 0, 0.1);
				margin-bottom: 20rpx;

				.dat_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 45rpx;

					.day {
						width: 300rpx;
						color: #a1f8ff;
						margin-left: 8rpx;
						margin-top: -8rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.day_i {
							height: 150rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;
							.tex_aa {
								font-size: 35rpx;
							}
						}
					}
				}

			}

			// 24小时
			.twenty_four {
				padding: 30rpx;
				border-radius: 20rpx;
				color: rgba(255, 255, 255, 0.5);
				background-color: rgba(0, 0, 0, 0.1);
				margin-bottom: 20rpx;

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;

					.scroll-view-item_H {
						margin: 20rpx;
						color: #ffffff;
						display: inline-block;
						text-align: center;
						// background-color: #4fc5bb;
					}

					.itemscroll_view {
						margin: 15rpx 5rpx 15rpx 5rpx;
						padding: 20rpx 30rpx;
						border-radius: 20rpx;
						background-color: rgba(0, 0, 0, 0.2);

						.flx {
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}

				.day {
					margin: 0 auto;
					text-align: center;
					font-size: 30rpx;
				}

			}



			.con_bom {
				color: #ffffff;
				margin: 30rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.text_y {
					font-size: 50rpx;
					text-align: center;
					color: #67fff3;
				}

				.status_box {
					padding: 0 40rpx 40rpx 40rpx;
					border-radius: 20rpx;



					.dev_status {
						font-size: 40rpx;
						padding: 20rpx 0;
						border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
						display: flex;
						align-items: center;
						justify-content: space-between;

					}

					.danwei {
						margin-left: 20rpx;
						font-size: 35rpx;
					}
				}

				.realtime {
					padding: 10rpx;
					background-color: #67fff3;
					font-size: 30rpx;
					color: #000000;
					border-radius: 100rpx;
					margin-top: 20rpx;
					text-align: center;
				}

				.realtimeACT {
					background-color: #4fc5bb;
				}
			}

		}


	}
</style>
<style>
	/* 引入字体图标 */
	@import url("/static/fonts/icons/qweather-icons.css");
</style>
<style>
	page {
		background-color: #7a7d81;
	}
</style>